<template>
  <div class="container">
    <!-- 学科管理 -->
    <el-card>
      <!-- 表单 -->
      <el-row type="flex" justify="space-between">
        <el-col>
          <el-form :inline="true" :model="dirForm" class="demo-form-inline">
            <el-form-item label="学科名称">
              <el-input v-model="dirForm.subjectName" size="mini" />
            </el-form-item>
            <el-form-item>
              <el-button size="mini" @click="btnQingchu">清楚</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="btnSousuo">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" justify="end">
            <el-button type="success" icon="el-icon-edit" @click="btnAdd">新增学科</el-button>
          </el-row>
        </el-col>
      </el-row>
      <!-- 提示 -->
      <el-alert
        :title="`数据一共${page.total}条`"
        type="info"
        show-icon
        :closable="false"
      />
      <!-- 表格 -->
      <el-table
        :data="subjectList"
        style="width: 100%"
      >
        <el-table-column
          fixed
          type="index"
          label="序号"
        />
        <el-table-column
          prop="subjectName"
          label="学科名称"
        />
        <el-table-column
          prop="username"
          label="创建者"
          width="100px"
        />
        <el-table-column
          prop="addDate"
          label="创建日期"
          width="180px"
        >
          <template slot-scope="{ row }">
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column
          prop="isFrontDisplay"
          label="前台是否显示"
          width="120px"
        >
          <template slot-scope="{ row }">
            {{ show(row) }}
          </template>
        </el-table-column>
        <!-- 向状态把绑定formatter事件 -->
        <el-table-column
          prop="twoLevelDirectory"
          label="二级目录"
        />
        <el-table-column
          prop="tags"
          label="标签"
        />
        <el-table-column
          prop="totals"
          label="题目数量"
        />
        <el-table-column
          label="操作"
          width="240px"
        >
          <template slot-scope="{ row }">
            <el-row type="flex" justify="space-between">
              <el-col :span="8">
                <el-link size="small" type="primary" @click="btnCatalogue(row)">学科分类</el-link>
              </el-col>
              <el-col :span="8">
                <el-link size="small" type="primary" @click="btnLabel(row)">学科标签</el-link>
              </el-col>
              <el-col :span="4">
                <el-link size="small" type="primary" @click="btnEdit(row)">修改</el-link>
              </el-col>
              <el-col :span="4">
                <el-link size="small" type="primary" @click="btnDel(row)">删除</el-link>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <el-pagination
          :current-page="page.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="page.pagesize"
          layout="prev ,pager , next, sizes, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>
    <!-- 弹框 -->
    <subjects-add
      ref="subjectDialog"
      :sub-dailog-show.sync="subDailogShow"
      @renderList="getSubjectList"
    />
  </div>
</template>

<script>
// 引入弹框组件 名字第一个字母不要大写否则在渲染时你用小写方式报错dialogVisible未定义但是使用
import subjectsAdd from '../components/subjects-add.vue'
import { list, remove } from '@/api/hmmm/subjects.js'
export default {
  components: {
    subjectsAdd
  },
  data () {
    return {
      dirForm: {
        subjectName: ''// 搜索学科名称
      },
      subjectList: [], // 用于承接学科列表
      page: {
        // 分页配置项
        page: 1, // 当前页
        pagesize: 10, // 每页显示多少条
        total: null// 总共多少条
      },
      currentPage: 1, // 当前页
      subDailogShow: false// 弹框显示状态
    }
  },
  computed: {
    
  },
  created () {
    // 调用学科列表
    this.getSubjectList()
  },
  methods: {
    show (row) {
      // 前台是否显示
      return row.isFrontDisplay === 1 ? '是' : '否'
    },
    async getSubjectList () {
      // 获取学科列表
      const { data } = await list({ ...this.page, ...this.dirForm })
      this.subjectList = data.items
      this.page.total = data.counts
    },
    btnQingchu () {
      // 清楚
      this.dirForm.subjectName = ''
    },
    async btnSousuo () {
      // 搜索
      this.page.page = 1
      this.getSubjectList()
    },
    btnAdd () {
      // 新增
      this.subDailogShow = true
    },
    btnEdit (row) {
      // 修改
      // 调用子组件的方法进行回显
      this.$refs.subjectDialog.subjectEdit(row)
      this.subDailogShow = true
    },
    async btnDel (row) {
      // 删除
      try {
        await this.$confirm('确定删除吗？')
        await remove(row)
        this.getSubjectList()
        this.$message.success('删除成功')
      } catch (e) {
        console.log(e)
      }
    },
    handleSizeChange (pagesize) {
      // 每页条数改变时
      this.page.pagesize = pagesize
      this.getSubjectList()
    },
    handleCurrentChange (newPage) {
      // 当前页改变时
      this.page.page = newPage
      this.getSubjectList()
    },
    
    btnCatalogue (row) {
      // 跳转到目录并传递当前的详情
      this.$router.push({
        path: 'directorys',
        name: 'subjects-directorys',
        query: {
          subjectID: row.id,
          subjectName: row.subjectName
        }
      })
    },
    btnLabel (row) {
      // 跳转到标签上并传递当前的详情
      // console.log(row)
      this.$router.push({
        path: 'tags',
        name: 'subjects-tags',
        query: {
          subjectID: row.id,
          subjectName: row.subjectName
        }
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.el-table__header-wrapper{

    height: 65px !important;

    line-height: 65px !important;

 }</style>
